<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-container">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">标题分类</li>
            <li>子分类</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-input-inline">
                    <input type="text" name="mytitle"  placeholder="根据标题类搜索" class="layui-input" id="mytitle1">
                </div>
                <button class="layui-btn layui-btn-normal" id="find1"><i class="layui-icon">&#xe615;</i> </button>
                <button class="layui-btn layui-btn-normal addBtn" href-url="type/goTypeBigAddOrEdit"><i class="layui-icon">&#xe61f;</i>添加标题分类 </button>
                <table id="big" lay-filter="tool1"></table>
            </div>
            <div class="layui-tab-item">
                <div class="layui-input-inline">
                    <input type="text" name="mytitle"  placeholder="根据标题类搜索" class="layui-input" id="mytitle2">
                </div>
                <button class="layui-btn layui-btn-normal" id="find2"><i class="layui-icon">&#xe615;</i> </button>
                <button class="layui-btn layui-btn-normal addBtn" href-url="type/goTypeSmallAddOrEdit"><i class="layui-icon">&#xe61f;</i>添加子分类 </button>
                <table id="small" lay-filter="tool2"></table>
            </div>
        </div>
    </div>


</div>
<script th:inline="javascript">
    layui.use(['table','element'], function(){
        var table = layui.table,
            element = layui.element,
            $ = layui.$;

        /**
         * 大标题分类
         */
        table.render({
            elem: '#big'
            ,url: '/type/typeBigList' //数据接口
            ,page: true //开启分页
            ,limit: 5
            ,limits: [5]
            ,id: 'big'
            ,cols: [
                [ //表头
                {field: 'id', title: 'ID', width:'10%', sort: true, fixed: 'left'}
                ,{field: 'name', title: '热门品牌', width:'20%'}
                ,{field: 'mark', title: '描述', width:'20%'}
                ,{field: 'createtime', title: '创建时间', width:'15%', sort: true,templet: '#createtime'}
                ,{field: 'updatetime', title: '上次修改时间', width:'15%', sort: true,templet: '#updatetime'}
                ,{fixed:'right', title: '操作',toolbar:"#bar1", width: '20%'}
            ]
            ]
        });

        /**
         * 小标题分类
         */
        table.render({
            elem: '#small'
            ,url: '/type/typeSmallList' //数据接口
            ,page: true //开启分页
            ,limit: 5
            ,limits: [5]
            ,id: 'small'
            ,cols: [
                [ //表头
                    {field: 'id', title: 'ID', width:'10%', sort: true, fixed: 'left'}
                    ,{field: 'name', title: '名称', width:'10%'}
                    ,{field: 'img', title: '图片', width:'20%',templet:'#img'}
                    ,{field: 'goodsTypeName', title: '所属类型', width:'10%'}
                    ,{field: 'createtime', title: '创建时间', width: '15%', sort: true,templet: '#createtime'}
                    ,{field: 'updatetime', title: '上次修改时间', width:  '15%', sort: true,templet: '#updatetime'}
                    ,{fixed:'right', title: '操作',toolbar:"#bar1", width: '20%'}
                ]
            ]
        });

        /**
         *  大类表格的工具栏
         */
        table.on('tool(tool1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'delete'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    $.ajax({
                        type: "GET",
                        url: "type/bigDelete",
                        data: {
                            id:data.id,
                            isDelete:0
                        },
                        dataType: "json",
                        success: function(data){
                            layer.msg(data.msg);
                            if(data.code!=500){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            }
                        }
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                $.ajax({
                    type: "GET",
                    url: "type/goTypeBigAddOrEdit",
                    data: {
                        id:data.id,
                    },
                    success: function(data){
                        $("#content-body").html(data);
                    }
                });
            }
        });

        /**
         * 小类表格工具栏
         */
        table.on('tool(tool2)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'delete'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type: "GET",
                        url: "type/smallDelete",
                        data: {
                            id:data.id,
                            isDelete:0
                        },
                        dataType: "json",
                        success: function(data){
                            layer.msg(data.msg);
                        }
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                $.ajax({
                    type: "GET",
                    url: "type/goTypeSmallAddOrEdit",
                    data: {
                        id:data.id,
                        isDelete: 0
                    },
                    success: function(data){
                        $("#content-body").html(data);
                    }
                });
            }
        });


        /**
         * 搜索大类
         */
        $("#find1").click(function () {
            table.reload('big',{
                where:{
                    name: $("#mytitle1").val()
                }
            })

        })
        /**
         * 搜索小类
         */
        $("#find2").click(function () {
            var mytitle = $("#mytitle2").val();
            table.reload('small',{
                where:{
                    name: mytitle
                }
            })
        })

        /**
         * 添加分类
         */
        $(".addBtn").click(function () {
            $("#content-body").load($(this).attr("href-url"))
        })

    });

</script>
<!--时间模板-->
<script type="text/html" id="createtime">
    {{getLocalTime(d.createtime)}}
</script>
<script type="text/html" id="updatetime">
    {{getLocalTime(d.updatetime)}}
</script>
<script type="text/html" id="img">
    <img src="{{d.img}}" height="100%"/>
</script>

<!--表格工具栏-->
<script type="text/html" id="bar1">
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="delete">删除</a>
</script>
</body>
</html>